﻿<style>
    .list-group-item > a {
        margin-top: -7px;
    }
    .pull-in {
        margin:0px;
    }
</style>
<div class="btn-group dropdown" style="width:100%">
    <button class="btn btn-success dropdown-toggle " style="width:100%" aria-haspopup="true" aria-expanded="false">筛选<span class="caret"></span></button>
    <ul class="dropdown-menu" style="width:100%">
        <li><a href="">最近联系人</a></li>
        <li><a href="">申请中</a></li>
        <li><a href="">已通过</a></li>
    </ul>
</div>
<ul class="list-group list-group-alt list-group-lg no-borders pull-in m-b-none" style="padding-top:20px;">
    <li class="list-group-item">
        <a href="#/hy/app/message" class="pull-left thumb-md m-r">
            <img src="img/a1.png" alt="..." class="img-circle">
        </a>
        <div class="clear">
            <a href="#/hy/app/message" class="h4 text-primary m-b-sm block">李晓芳</a>
            <div>今天天气不错,出来玩啊</div>
        </div>
    </li>
    <li class="list-group-item">
        <a href="#/hy/app/message" class="pull-left thumb-md m-r">
            <img src="img/b2.jpg" alt="..." class="">
        </a>
        <div class="clear">
            <a href="#/hy/app/message" class="h4 text-primary m-b-sm block">香山半日游    <span class="label label-sm bg-info">申请中</span></a>
            <div>时间 : 2016-4-25</div>
        </div>
    </li>
    <li class="list-group-item">
        <a href="" class="pull-left thumb-md m-r">
            <img src="img/b4.jpg" alt="..." class="">
        </a>
        <div class="clear">
            <a href="" class="h4 text-primary m-b-sm block">游泳    <span class="label label-sm bg-success">已通过</span></a>
            <div>时间 : 2016-4-25</div>
        </div>
    </li>
    <li class="list-group-item">
        <a href="#/hy/app/message" class="pull-left thumb-md m-r">
            <img src="img/a2.png" alt="..." class="img-circle">
        </a>
        <div class="clear">
            <a href="#/hy/app/message" class="h4 text-primary m-b-sm block">顺溜 <span class="label label-sm bg-danger">VIP</span></a>
            <div>明天是大晴天</div>
        </div>
    </li>
    <li class="list-group-item">
        <a href="#/hy/app/message" class="pull-left thumb-md m-r">
            <img src="img/a3.png" alt="..." class="img-circle">
        </a>
        <div class="clear">
            <a href="#/hy/app/message" class="h4 text-primary m-b-sm block">上官关鑫 <span class="label label-sm" style="color:#808080;font-weight:100">(不要迷恋姐,姐只是个传说)</span></a>
            <div>今天天气不错,出来玩啊</div>
        </div>
    </li>
    <li class="list-group-item">
        <a href="#/hy/app/message" class="pull-left thumb-md m-r">
            <img src="img/a4.png" alt="..." class="img-circle">
        </a>
        <div class="clear">
            <a href="#/hy/app/message" class="h4 text-primary m-b-sm block">黄尚 <span class="label label-sm bg-warning">♔</span></a>
            <div>还是去看个电影吧</div>
        </div>
    </li>
    <li class="list-group-item">
        <a href="#/hy/app/message" class="pull-left thumb-md m-r">
            <img src="img/a5.png" alt="..." class="img-circle">
        </a>
        <div class="clear">
            <a href="#" class="h4 text-primary m-b-sm block">李狗蛋</a>
            <div>今天天气不错,出来玩啊</div>
        </div>
    </li>
</ul>

<!--<div class="">
    <tabset class="tab-container">
        <tab>
            <tab-heading>
                最近联系人 <span class="badge bg-primary badge-sm m-l-xs">9</span>
            </tab-heading>
            <ul class="list-group list-group-alt list-group-lg no-borders pull-in m-b-none">
                <li class="list-group-item">
                    <a href="#" class="pull-left thumb-md m-r">
                        <img src="img/a1.png" alt="..." class="img-circle">
                    </a>
                    <div class="clear">
                        <a href="#" class="h4 text-primary m-b-sm block">李晓芳<span class="label label-sm bg-info">Editor</span></a>
                        <div>今天天气不错,出来玩啊</div>
                    </div>
                </li>
                <li class="list-group-item">
                    <a href="#" class="pull-left thumb-md m-r">
                        <img src="img/a2.png" alt="..." class="img-circle">
                    </a>
                    <div class="clear">
                        <a href="#" class="h4 text-primary m-b-sm block">顺溜<span class="label label-sm bg-danger">VIP</span></a>
                        <div>明天是大晴天</div>
                    </div>
                </li>
                <li class="list-group-item">
                    <a href="#" class="pull-left thumb-md m-r">
                        <img src="img/a3.png" alt="..." class="img-circle">
                    </a>
                    <div class="clear">
                        <a href="#" class="h4 text-primary m-b-sm block">上官关鑫</a>
                        <div>今天天气不错,出来玩啊</div>
                    </div>
                </li>
                <li class="list-group-item">
                    <a href="#" class="pull-left thumb-md m-r">
                        <img src="img/a4.png" alt="..." class="img-circle">
                    </a>
                    <div class="clear">
                        <a href="#" class="h4 text-primary m-b-sm block">黄尚</a>
                        <div>还是去看个电影吧</div>
                    </div>
                </li>
                <li class="list-group-item">
                    <a href="#" class="pull-left thumb-md m-r">
                        <img src="img/a5.png" alt="..." class="img-circle">
                    </a>
                    <div class="clear">
                        <a href="#" class="h4 text-primary m-b-sm block">李狗蛋</a>
                        <div>今天天气不错,出来玩啊</div>
                    </div>
                </li>
            </ul>
        </tab>

        <tab>
            <tab-heading>
                好友列表 <span class="badge bg-danger badge-sm m-l-xs">6</span>
            </tab-heading>
            <ul class="list-group list-group-alt list-group-lg no-borders pull-in m-b-none">
                <li class="list-group-item">
                    <a href="#" class="pull-left thumb-md m-r">
                        <img src="img/a5.png" alt="..." class="img-circle">
                    </a>
                    <div class="clear">
                        <a href="#" class="h4 text-primary m-b-sm block">蒋彩云<span class="label label-sm bg-info">Editor</span></a>
                        <div>个性签名:闭上眼睛渴望你出现，怎么让你再爱我多一点！</div>
                    </div>
                </li>
                <li class="list-group-item">
                    <a href="#" class="pull-left thumb-md m-r">
                        <img src="img/a4.png" alt="..." class="img-circle">
                    </a>
                    <div class="clear">
                        <a href="#" class="h4 text-primary m-b-sm block">王丹凤<span class="label label-sm bg-danger">VIP</span></a>
                        <div>个性签名:明知情深是害可我依然固执的死性不改</div>
                    </div>
                </li>
                <li class="list-group-item">
                    <a href="#" class="pull-left thumb-md m-r">
                        <img src="img/a3.png" alt="..." class="img-circle">
                    </a>
                    <div class="clear">
                        <a href="#" class="h4 text-primary m-b-sm block">张海燕</a>
                        <div>个性签名:你只需要沿途流浪，看够风景，归属自然有。</div>
                    </div>
                </li>
                <li class="list-group-item">
                    <a href="#" class="pull-left thumb-md m-r">
                        <img src="img/a2.png" alt="..." class="img-circle">
                    </a>
                    <div class="clear">
                        <a href="#" class="h4 text-primary m-b-sm block">关淑兰</a>
                        <div>个性签名:菇凉，对自己好点 那些狗不值得你去爱</div>
                    </div>
                </li>
                <li class="list-group-item">
                    <a href="#" class="pull-left thumb-md m-r">
                        <img src="img/a1.png" alt="..." class="img-circle">
                    </a>
                    <div class="clear">
                        <a href="#" class="h4 text-primary m-b-sm block">雨婷</a>
                        <div>个性签名:不属于我的东西，我不要。不是真心给我的东西，我不稀罕</div>
                    </div>
                </li>
            </ul>
        </tab>

        <tab>
            <tab-heading>
                认识更多人 <span class="badge badge-sm m-l-xs">16</span>
            </tab-heading>
            <ul class="list-group no-borders pull-in m-b-none">
                <li class="list-group-item">
                    <a href="#" class="pull-left thumb-md m-r">
                        <img src="img/a1.png" alt="..." class="img-circle">
                    </a>
                    <div class="clear">
                        <a href="#" class="h4 text-primary m-b-sm block">二狗子<span class="label label-sm bg-info">Editor</span></a>
                        <div>擅长吃吃吃</div>
                    </div>

                    <p>
                        <span class="label bg-primary pos-rlt m-r inline wrapper-xs"><i class="arrow right arrow-primary"></i> Tags:</span> <a href class="m-r-sm">美食达人</a> <a href>电玩达人</a>
                    </p>
                </li>
                <li class="list-group-item">
                    <a href="#" class="pull-left thumb-md m-r">
                        <img src="img/a5.png" alt="..." class="img-circle">
                    </a>
                    <div class="clear">
                        <a href="#" class="h4 text-primary m-b-sm block">李狗蛋<span class="label label-sm bg-info">Editor</span></a>
                        <div>擅长游山玩水</div>
                    </div>

                    <p>
                        <span class="label bg-primary pos-rlt m-r inline wrapper-xs"><i class="arrow right arrow-primary"></i> Tags:</span> <a href class="m-r-sm">旅游小马达</a> <a href>电玩达人</a>
                    </p>
                </li>
                <li class="list-group-item">
                    <a href="#" class="pull-left thumb-md m-r">
                        <img src="img/a3.png" alt="..." class="img-circle">
                    </a>
                    <div class="clear">
                        <a href="#" class="h4 text-primary m-b-sm block">鸭蛋<span class="label label-sm bg-info">Editor</span></a>
                        <div>擅长吃吃吃</div>
                    </div>

                    <p>
                        <span class="label bg-primary pos-rlt m-r inline wrapper-xs"><i class="arrow right arrow-primary"></i> Tags:</span> <a href class="m-r-sm">美食达人</a> <a href>电玩达人</a>
                    </p>
                </li>
            </ul>
        </tab>
        <tab>
            <tab-heading>
                进行中结伴 <span class="badge bg-primary badge-sm m-l-xs">9</span>
            </tab-heading>
              <ul class="list-group list-group-alt list-group-lg no-borders pull-in m-b-none" style="margin-top:-15px;">
                  <li class="list-group-item" style="background-color:#52AFFF;color:white">
                      我发起的
                  </li>
                <li class="list-group-item">
                    <a href="#" class="pull-left thumb-md m-r">
                        <img src="img/b1.jpg" alt="..." class="">
                    </a>
                    <div class="clear">
                        <a href="#" class="h4 text-primary m-b-sm block">登山</a>
                        <div>周五登山旅游</div>
                    </div>
                </li>
                <li class="list-group-item">
                    <a href="#" class="pull-left thumb-md m-r">
                        <img src="img/b0.jpg" alt="..." class="">
                    </a>
                    <div class="clear">
                        <a href="#" class="h4 text-primary m-b-sm block">聚会</a>
                        <div>周六吃饭</div>
                    </div>
                </li>
                <li class="list-group-item">
                    <a href="#" class="pull-left thumb-md m-r">
                        <img src="img/b2.jpg" alt="..." class="">
                    </a>
                    <div class="clear">
                        <a href="#" class="h4 text-primary m-b-sm block">电影</a>
                        <div>下周一看电影</div>
                    </div>
                </li>
                <li class="list-group-item">
                    <a href="#" class="pull-left thumb-md m-r">
                        <img src="img/b3.jpg" alt="..." class="">
                    </a>
                    <div class="clear">
                        <a href="#" class="h4 text-primary m-b-sm block">一起补习</a>
                        <div>补习专业知识</div>
                    </div>
                </li>
            </ul>


            <ul class="list-group list-group-alt list-group-lg no-borders pull-in m-b-none" style="margin-top:15px;">
                <li class="list-group-item" style="background-color:#52AFFF;color:white">
                    我参加的
                </li>
                <li class="list-group-item">
                    <a href="#" class="pull-left thumb-md m-r">
                        <img src="img/b0.jpg" alt="..." class="">
                    </a>
                    <div class="clear">
                        <a href="#" class="h4 text-primary m-b-sm block">聚会</a>
                        <div>周六吃饭</div>
                    </div>
                </li>
                <li class="list-group-item">
                    <a href="#" class="pull-left thumb-md m-r">
                        <img src="img/b2.jpg" alt="..." class="">
                    </a>
                    <div class="clear">
                        <a href="#" class="h4 text-primary m-b-sm block">电影</a>
                        <div>下周一看电影</div>
                    </div>
                </li>
                <li class="list-group-item">
                    <a href="#" class="pull-left thumb-md m-r">
                        <img src="img/b3.jpg" alt="..." class="">
                    </a>
                    <div class="clear">
                        <a href="#" class="h4 text-primary m-b-sm block">一起补习</a>
                        <div>补习专业知识</div>
                    </div>
                </li>
            </ul>
        </tab>
        <tab>
            <tab-heading>
                已完成结伴 <span class="badge bg-primary badge-sm m-l-xs">9</span>
            </tab-heading>
            <ul class="list-group list-group-alt list-group-lg no-borders pull-in m-b-none">
                <li class="list-group-item">
                    <a href="#" class="pull-left thumb-md m-r">
                        <img src="img/b1.jpg" alt="..." class="">
                    </a>
                    <div class="clear">
                        <a href="#" class="h4 text-primary m-b-sm block">登山</a>
                        <div>周五登山旅游</div>
                    </div>
                </li>
                <li class="list-group-item">
                    <a href="#" class="pull-left thumb-md m-r">
                        <img src="img/b0.jpg" alt="..." class="">
                    </a>
                    <div class="clear">
                        <a href="#" class="h4 text-primary m-b-sm block">聚会</a>
                        <div>周六吃饭</div>
                    </div>
                </li>
                <li class="list-group-item">
                    <a href="#" class="pull-left thumb-md m-r">
                        <img src="img/b2.jpg" alt="..." class="">
                    </a>
                    <div class="clear">
                        <a href="#" class="h4 text-primary m-b-sm block">电影</a>
                        <div>下周一看电影</div>
                    </div>
                </li>
                <li class="list-group-item">
                    <a href="#" class="pull-left thumb-md m-r">
                        <img src="img/b3.jpg" alt="..." class="">
                    </a>
                    <div class="clear">
                        <a href="#" class="h4 text-primary m-b-sm block">一起补习</a>
                        <div>补习专业知识</div>
                    </div>
                </li>
            </ul>
        </tab>
    </tabset>
</div>-->
